<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <div>点击次数:{{count}}</div>
    <button @click="this.count+=1">点击</button>
    <button @click="this.count++">点击</button>
    <button @click="click(2,$event)">点击</button>
    <button @click="click2(2),log($event)">点击</button>
    <div @click="click11" style="border:solid red;text-align: center">
        外层
        <div @click="click12" style="border:solid red">
            中层
            <div @click="click13" style="border:solid red">
                单击
            </div>
        </div>
    </div>
    <div @click.capture="click11" style="border:solid red">
        外层
        <div @click.capture="click12" style="border:solid red">
            中层
            <div @click.capture="click13" style="border:solid red">
                单击
            </div>
        </div>
    </div>
    <div @click.stop="click11" style="border:solid red">
        外层
        <div @click.stop="click12" style="border:solid red">
            中层
            <div @click.stop="click13" style="border:solid red">
                单击
            </div>
        </div>
    </div>
    <div @click="click11" style="border:solid red">
        外层
        <div @click.stop="click12" style="border:solid red">
            中层
            <div @click="click13" @keyup.ctrl style="border:solid red">
                单击
            </div>
        </div>
    </div>
</div>
<script>
    var App = {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            click(step, event) {
                console.log("click")
                console.log(event)
                this.count += step
            },
            click2(step) {
                console.log("click2")
                this.count += step
            },
            log(evnet) {
                console.log(evnet)
            },
            click11() {
                console.log("click11")
            },
            click12() {
                console.log("click12")
            },
            click13() {
                console.log("click13")
            },

        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
